<script setup>
import PageIntroduce from '@/components/PageIntroduce.vue'
import MilkTeaRecommend from '@/components/MilkTeaRecommend.vue'
import { ref } from 'vue'

const title = '精选原料，匠心制作，只为给您带来最纯粹的奶茶享受。'
const IngredientList = ref([
  {
    title: "选用<span style='color:#85be55'>优质</span>茶叶",
    burdening:
      "<span style='color:#191918;font-size:20px;'> 来自东韵堂的高级茶叶</span>",
    description:
      ' <span style="color:#191918;font-size:24px;"> 根据查询相关资料信息，东韵养生茶是国内十\
大养生茶品牌之一，含有多种人体氨基酸，铁，钙\
等微量元素，营养丰富，清香好喝。含有玛卡、\
黄精、枸杞、桑葚、红枣等几种中药成分，有\
补肾、去疲劳的功效，还可以改善身体状况。</span>',
    imageSrc: new URL('@/assets/home/home_pic.png', import.meta.url).href,
    isImageRight: true
  },
  {
    title: "选用<span style='color:#85be55'>优质</span>鲜牛奶",
    burdening:
      "<span style='color:#191918;font-size:20px;'> 来自东韵堂的高级茶叶</span>",
    description:
      ' <span style="color:#191918;font-size:24px;"> 根据查询相关资料信息，东韵养生茶是国内十\
大养生茶品牌之一，含有多种人体氨基酸，铁，钙\
等微量元素，营养丰富，清香好喝。含有玛卡、\
黄精、枸杞、桑葚、红枣等几种中药成分，有\
补肾、去疲劳的功效，还可以改善身体状况。</span>',
    imageSrc: new URL('@/assets/home/home_pic.png', import.meta.url).href,
    isImageRight: false
  },
  {
    title: "选用<span style='color:#85be55'>进口</span>奶粉",
    burdening:
      "<span style='color:#101010;font-size:20px;'> 来自东韵堂的高级茶叶</span>",
    description:
      ' <span style="color:#191918;font-size:24px;"> 根据查询相关资料信息，东韵养生茶是国内十\
大养生茶品牌之一，含有多种人体氨基酸，铁，钙\
等微量元素，营养丰富，清香好喝。含有玛卡、\
黄精、枸杞、桑葚、红枣等几种中药成分，有\
补肾、去疲劳的功效，还可以改善身体状况。</span>',
    imageSrc: new URL('@/assets/home/home_pic.png', import.meta.url).href,
    isImageRight: true
  },
  {
    title: "选用<span style='color:#85be55'>纯净无添加</span>黄冰糖浆",
    burdening:
      "<span style='color:#101010;font-size:20px;'> 黄冰糖浆零色素，慢火熬制</span>",
    description:
      ' <span style="color:#191918;font-size:24px;"> 黄冰糖浆纯粹的配料——仅含冰糖与饮用水两种成分。' +
      '黄冰糖浆零色素添加，其色泽完全来源于冰糖在熬制过程中发生的自然变化，' +
      '无任何人工色素的干扰。黄冰糖浆的独特之处，更在于其慢火熬制的工艺。' +
      '慢火之下，冰糖与水缓缓交融，逐渐变得浓稠而富有光泽，色泽也由透明转为温暖的黄色。</span>',
    imageSrc: new URL('@/assets/home/home_pic.png', import.meta.url).href,
    isImageRight: false
  }
])
</script>

<template>
  <div class="container">
    <div class="banner"></div>
    <PageIntroduce :title="title"></PageIntroduce>
    <div class="ingredient-list">
      <MilkTeaRecommend
        v-for="l in IngredientList"
        :key="l.name"
        :title="l.title"
        :burdening="l.burdening"
        :rowGap="180"
        :line-gap="10"
        imageWidth="407px"
        imageHeight="407px"
        :description="l.description"
        :image-src="l.imageSrc"
        :is-image-right="l.isImageRight"
        circle
        text-width="600px"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  background: #fcffef;
  .banner {
    height: 300px;
    background-image: url('@/assets/drink/drink_banner.png');
  }
  .ingredient-list {
    padding-bottom: 233px;
  }
}
</style>
